import { Anchor, Col, DatePicker, Divider, Menu, Row, Spin, Typography } from 'antd';
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { RouteComponentProps, useParams } from 'react-router-dom';

import { ProductIntro } from '../../components';
import { MainLayout } from '../../layouts/main-layout';
import { useSelector } from '../../redux/hooks';
import { getProductDetail } from '../../redux/product-detail/slice';
import styles from './detail-page.module.css';

interface MatchParams {
  touristRouteId: string;
}
export const DetailPage: React.FC<RouteComponentProps<MatchParams>> = () => {
  const { RangePicker } = DatePicker;
  // 获取匹配到的路由参数
  const { touristRouteId } = useParams<MatchParams>();
  const loading = useSelector((state) => state.productDetail.loading);
  const product = useSelector((state) => state.productDetail.data);
  const error = useSelector((state) => state.productDetail.error);

  const dispatch = useDispatch();

  // useEffect的第二个参数是个空数组，代表只会执行一次
  useEffect(() => {
    dispatch(getProductDetail(touristRouteId) as any);
  }, [touristRouteId]);
  // loading加载
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '100%'
        }}
      />
    );
  }
  // 错误信息
  if (error) {
    return <div>网站出错啦，{error}</div>;
  }
  // 产品信息
  return (
    <>
      <MainLayout>
        {/* 产品简介和日期选择 */}
        <div className={styles['product-info-container']}>
          <Row>
            <Col span={13}>
              <ProductIntro
                title={product.title}
                shortDescription={product.shortDescription}
                price={product.price}
                coupons={product.coupons}
                points={product.points}
                discount={product.discount}
                rating={product.rating}
                pictures={product.pictures}
              />
            </Col>
            <Col span={11}>
              <RangePicker open style={{ marginTop: 20 }} />
            </Col>
          </Row>
        </div>
        {/* 锚点菜单 */}
        <div className={styles['product-detail-container']}></div>
        <Anchor className={styles['product-detail-anchor']}>
          <Menu mode="horizontal">
            <Menu.Item key="1">
              <Anchor.Link href="#feature" title="产品特色" />
            </Menu.Item>
            <Menu.Item key="3">
              <Anchor.Link href="#fee" title="费用" />
            </Menu.Item>
            <Menu.Item key="4">
              <Anchor.Link href="#notes" title="预定须知" />
            </Menu.Item>
          </Menu>
        </Anchor>
        {/* 产品特色 */}
        <div id="feature" className={styles['product-detail-container']}>
          <Divider orientation={'center'}>
            <Typography.Title level={3}>产品特色</Typography.Title>
          </Divider>
          <div
            dangerouslySetInnerHTML={{
              __html: product.features
            }}
            style={{ margin: 50 }}
          />
        </div>
        {/* 费用 */}
        <div id="fee" className={styles['product-detail-container']}>
          <Divider orientation={'center'}>
            <Typography.Title level={3}>费用</Typography.Title>
          </Divider>
          <div
            dangerouslySetInnerHTML={{
              __html: product.features
            }}
            style={{ margin: 50 }}
          />
        </div>
        {/* 预订须知 */}
        <div id="notes" className={styles['product-detail-container']}>
          <Divider orientation={'center'}>
            <Typography.Title level={3}>预订须知</Typography.Title>
          </Divider>
          <div
            dangerouslySetInnerHTML={{
              __html: product.features
            }}
            style={{ margin: 50 }}
          />
        </div>
      </MainLayout>
    </>
  );
};
